<template>
	<view class="container">
		<view class="input-box">
			<view class="input-title">车牌号码</view>
			<view class="popup-input-area" @click="showKeyboard">
				<input v-model="carLisence" class="popup-input" :disabled="true" placeholder="请输入车牌号"
					style="pointer-events: none;" />
			</view>
		</view>
		<view class="btn-group">
			<button class="btn-buy" bindtap="btn" @click="bindCar">
				确认绑定
			</button>

		</view>
		<KeyBoard :showKeyBoard="show" :showCNKeyBoard="showCn" v-on:input-over="hideKeyBoard"
			v-on:change-press="changeKeyBoard" v-on:key-press="getPressKeyValue" v-on:del-press="delCarKeyPress"
			v-on:clear-press="clearCarInput" ref="keyBoard" />
	</view>
</template>

<script>
	import KeyBoard from "@/components/keyBoard/keyBoard.vue";
	import {
		bindMyCar
	} from "@/api/api"
	export default {
		components: {
			KeyBoard,
		},
		data() {
			return {
				show: false,
				showCn: false,
				carLength: 8,
				carlicenseArr: [],
				carLisence: ''
			};
		},
		methods: {
			async bindCar() { //绑定车牌
				const result = await bindMyCar({
					openId: 'o-z5d5PEJnmaTim1CA6ezbBcVYVM',
					carLicense: this.carLisence
				});
				if (result.code == 200) {
					uni.showToast({
						title: "绑定成功~",
						icon: "none",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/myCar/myCar'
						})
					}, 300)

					return
				}
				uni.showToast({
					title: result.msg,
					icon: "none",
				});
			},
			showKeyboard() {
				this.show = true; //展示键盘
				this.showCn = true; //展示中文汉字
			},
			//键盘点击完成，收起键盘
			hideKeyBoard() {
				this.show = false;
			},
			//切换中英文键盘
			changeKeyBoard() {
				this.showCn = !this.showCn;
			},
			//获取按键值
			getPressKeyValue(val) {
				let car = this.carlicenseArr;
				if (car.length > (this.carLength - 1)) {
					console.log("车牌长度超出");
					return;
				}
				car.push(val)
				this.carlicenseArr = car;
				this.carLisence = car.join('');
				this.showCn = car.length >= 1 ? false : true;
			},
			delCarKeyPress() {
				let carArr = this.carlicenseArr;
				carArr.pop();
				this.carlicenseArr = carArr;
				this.carLisence = carArr.join('');
				if (carArr.length == 0) {
					this.showCn = true
				}
			},
			//按下清空键
			clearCarInput() {
				this.carlicenseArr = [];
				this.carLisence = "";
				this.carLength = 8;
				this.showCn = true
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding-top: 24rpx;
		background: #F9FAFC;
		margin: 0 auto;
		width: 95%;
	}

	.input-box {
		width: 100%;
		border-radius: 28rpx;
		padding: 50rpx 30rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);
		box-sizing: border-box;
	}

	.input-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #242a37;
		line-height: 36rpx;
		padding-left: 40rpx;
	}

	.popup-input-area {
		margin-top: 44rpx;
		line-height: 88rpx;
		height: 104rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background: rgba(45, 79, 161, 0.08);
		border-radius: 52rpx;

	}

	.popup-input {
		line-height: 88rpx;
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
		font-size: 32rpx;
		z-index: 999;
	}

	.btn-group {
		position: relative;
		z-index: 2;
		margin-top: 100rpx;
	}

	.btn-buy {
		width: 80%;
		height: 88rpx;
		background: #2d4fa2;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>
